<div class="game-container">
  <div class="game-status" *ngIf="gameStatus !== 'playing'">
    {{ gameStatus === 'white_won' ? '白方胜利！' : '黑方胜利！' }}
  </div>
  
  <div class="current-player">
    当前回合: {{ currentPlayer === 'white' ? '白方' : '黑方' }}
  </div>

  <div class="checkers-board">
    <div class="board-row" *ngFor="let row of board; let i = index">
      <div class="board-cell" 
           *ngFor="let cell of row; let j = index"
           [ngClass]="{
             'black-cell': (i + j) % 2 === 1,
             'white-cell': (i + j) % 2 === 0,
             'possible-move': isPossibleMove(i, j) || isForcedMove(i, j)
           }"
           (click)="onPieceClick(i, j)">
        <div class="checker" 
             *ngIf="cell"
             [ngClass]="{
               'black-checker': cell.type === 2,
               'white-checker': cell.type === 1,
               'king': cell.isKing,
               'selected': selectedPiece?.row === i && selectedPiece?.col === j
             }">
        </div>
      </div>
    </div>
  </div>

  <button class="undo-button" (click)="undoLastMove()" [disabled]="moveHistory.length === 0">
    悔棋
  </button>
</div>
